import { useEffect, useState, useRef } from 'react';
import { Outlet, history } from 'umi';
import './index.less';
import './rem.js';
import '@nutui/nutui-react/dist/style.css';
import { Audio } from '@nutui/nutui-react';
import { Cell, Button, Barrage, Input } from '@nutui/nutui-react';

export default function Index(props) {
  // console.log(props);
  const [value, UpdateValue] = useState('');
  let [startY, setstartY] = useState(0);
  let [currentIndex, setCurrnetIndex] = useState(0);
  let [routerarr] = useState([
    '/hunli/page1',
    '/hunli/page2',
    '/hunli/page3',
    '/hunli/page4',
    '/hunli/page5',
    '/hunli/page6',
    '/hunli/page7',
    '/hunli/page8',
    '/hunli/page9',
    '/hunli/page10',
  ]);
  const [show, setshow] = useState(false);
  const starttouch = (e) => {
    let start = e.targetTouches[0];
    setstartY(start.clientY);
  };
  const endtouch = (e) => {
    let end = e.changedTouches[0];
    let x = currentIndex;
    let pages = document.querySelector('.hunli');
    if (startY - end.clientY > 50) {
      x += 1;
      if (x >= routerarr.length) return setCurrnetIndex(routerarr.length - 1);
      setTimeout(() => {
        history.push(routerarr[x]);
        pages.style.animation = 'none';
      }, 1000);
      pages.style.animation = 'nextPage2 3s linear';
    } else if (startY - end.clientY < -50) {
      x -= 1;
      if (x < 0) return setCurrnetIndex(0);
      setTimeout(() => {
        history.push(routerarr[x]);
        pages.style.animation = 'none';
      }, 1000);
      pages.style.animation = 'nextPage1 1s linear';
    }
    setCurrnetIndex(x);
  };
  // 弹幕
  const barrageStyle = {
    padding: '20px 0',
    height: '120px',
    boxSizing: 'border-box',
    backgroundColor: 'rgba(225,225,225,0)',
    zIndex: 9999999,
    boxShadow: 'none',
  };
  const list = [
    '龙凤呈祥',
    '永浴爱河',
    '百年好合',
    '郎才女貌',
    '白头偕老',
    '幸福快乐',
    '白首同心',
    '两情相悦',
    '幸福美满',
    '知音百年',
    '爱情永固',
    '连理交枝',
  ];
  const barrageRef = useRef(null);
  const inPut = useRef(null);
  const addBarrage = () => {
    // console.log(barrageRef.current);
    // console.log(inPut)
    if (inPut.current.value != '') {
      barrageRef.current.add(value);
    }
    inPut.current.value = '';
    console.log(inPut);
  };
  return (
    <div
      className="hunli"
      onTouchStart={(e) => starttouch(e)}
      onTouchEnd={(e) => endtouch(e)}
    >
      {props.children}
      <span className="audio">
        <Audio
          autoplay={false}
          url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
          type="icon"
          loop={false}
          preload="auto"
          muted={false}
          onPlayEnd={() => alert('ended!')}
        />
      </span>
      <div className="danmu">
        {show ? (
          ''
        ) : (
          <Cell className="barrage-demo-wrap" style={barrageStyle}>
            <Barrage
              ref={barrageRef}
              speeds={6000}
              barrageList={list}
              style={barrageStyle}
            />
          </Cell>
        )}

        <div className="test" style={{ textAlign: 'center' }}>
          <Input
            ref={inPut}
            name="text"
            placeholder="请输入祝福语"
            onChange={(val) => {
              UpdateValue(val);
            }}
          />

          {show ? (
            <div style={{ display: 'flex' }}>
              <span
                onClick={() => {
                  setshow(false);
                }}
              >
                <svg
                  t="1678257332245"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2231"
                  width="32"
                  height="32"
                >
                  <path
                    d="M714.752 555.008h-112.64v-26.624h61.44c24.576 0 36.864-14.336 36.864-36.864v-147.456c0-34.816-20.48-38.912-32.768-38.912h-16.384c6.144-8.192 10.24-14.336 14.336-20.48 8.192-14.336 4.096-24.576-8.192-32.768-12.288-6.144-24.576-2.048-32.768 8.192-2.048 2.048-6.144 8.192-8.192 12.288-10.24 16.384-18.432 26.624-20.48 32.768H552.96c-8.192-14.336-18.432-30.72-28.672-47.104-8.192-10.24-20.48-12.288-32.768-6.144-12.288 8.192-16.384 20.48-8.192 32.768 4.096 4.096 8.192 12.288 14.336 22.528h-8.192c-12.288-2.048-20.48 2.048-26.624 6.144-6.144 6.144-8.192 16.384-8.192 28.672V491.52c0 12.288 2.048 22.528 8.192 28.672 6.144 6.144 16.384 8.192 26.624 8.192H552.96v28.672h-102.4c-4.096 0-8.192 0-12.288 6.144v-43.008c0-28.672-16.384-36.864-28.672-36.864h-51.2s-2.048-2.048 0-10.24l2.048-45.056c0-4.096 0-8.192 2.048-8.192H395.264c8.192 0 16.384-2.048 20.48-6.144 6.144-6.144 10.24-16.384 10.24-32.768V307.2c0-14.336-2.048-24.576-10.24-30.72-6.144-6.144-16.384-10.24-30.72-10.24h-65.536c-8.192 0-20.48 2.048-22.528 22.528 0 14.336 6.144 22.528 20.48 24.576h53.248c6.144 0 10.24 2.048 10.24 12.288v30.72c0 14.336-6.144 16.384-12.288 16.384h-22.528c-12.288 0-20.48 2.048-26.624 8.192-6.144 6.144-8.192 16.384-8.192 28.672l-2.048 86.016c0 10.24 2.048 20.48 8.192 24.576 6.144 6.144 14.336 8.192 24.576 8.192h40.96c4.096 0 6.144 0 6.144 2.048 2.048 2.048 4.096 4.096 2.048 14.336 0 2.048 0 8.192-2.048 16.384-2.048 43.008-6.144 59.392-8.192 65.536-6.144 12.288-26.624 6.144-43.008 0-18.432-6.144-26.624 2.048-32.768 10.24-6.144 14.336-2.048 26.624 12.288 32.768 47.104 16.384 79.872 14.336 100.352-8.192 6.144-6.144 14.336-20.48 18.432-67.584 4.096 6.144 10.24 8.192 14.336 8.192h102.4v69.632c0 6.144 2.048 20.48 24.576 20.48 14.336 0 22.528-8.192 22.528-20.48v-69.632h110.592c6.144 0 18.432-2.048 20.48-22.528 2.048-20.48-8.192-24.576-16.384-24.576z m-151.552-155.648h-65.536v-43.008c-2.048-10.24 2.048-14.336 12.288-12.288h53.248v55.296z m0 90.112h-53.248c-10.24 2.048-14.336-6.144-12.288-18.432v-34.816h65.536v53.248z m32.768-143.36h51.2c10.24-2.048 14.336 2.048 14.336 12.288v43.008h-65.536v-55.296z m0 88.064h65.536V471.04c0 10.24-6.144 16.384-16.384 16.384H593.92v-53.248z"
                    fill="#333333"
                    p-id="2232"
                  ></path>
                  <path
                    d="M724.992 145.408H299.008c-49.152 0-94.208 20.48-126.976 53.248l-6.144 6.144s-2.048 2.048-2.048 4.096c-24.576 30.72-40.96 69.632-40.96 112.64v288.768c0 96.256 77.824 176.128 176.128 176.128h106.496l83.968 83.968c6.144 6.144 14.336 8.192 22.528 8.192s16.384-2.048 22.528-8.192l83.968-83.968h106.496c96.256 0 176.128-77.824 176.128-176.128V321.536c0-98.304-77.824-176.128-176.128-176.128z m0 61.44c63.488 0 114.688 51.2 114.688 114.688v288.768c0 18.432-4.096 36.864-12.288 51.2L239.616 223.232c16.384-10.24 36.864-16.384 57.344-16.384h428.032z m-118.784 516.096c-4.096 0-8.192 0-10.24 2.048-4.096 2.048-8.192 4.096-10.24 6.144L512 804.864l-71.68-71.68c-2.048-2.048-6.144-6.144-10.24-6.144-4.096-2.048-8.192-2.048-10.24-2.048h-118.784c-63.488 0-114.688-51.2-114.688-114.688V321.536c0-18.432 4.096-36.864 12.288-53.248l587.776 438.272c-16.384 10.24-36.864 16.384-59.392 16.384h-120.832z"
                    fill="#333333"
                    p-id="2233"
                  ></path>
                </svg>
              </span>
              <Button
                type="danger"
                onClick={() => {
                  addBarrage();
                }}
              >
                点击发送
              </Button>
            </div>
          ) : (
            <div style={{ display: 'flex' }}>
              <span
                onClick={() => {
                  setshow(true);
                }}
              >
                <svg
                  t="1678257189151"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1847"
                  width="32"
                  height="32"
                >
                  <path
                    d="M714.752 555.008h-112.64v-26.624h61.44c24.576 0 36.864-14.336 36.864-36.864v-147.456c0-34.816-20.48-38.912-32.768-38.912h-16.384c6.144-8.192 10.24-14.336 14.336-20.48 8.192-14.336 4.096-24.576-8.192-32.768-12.288-6.144-24.576-2.048-32.768 8.192-2.048 2.048-6.144 8.192-8.192 12.288-10.24 16.384-18.432 26.624-20.48 32.768H552.96c-8.192-14.336-18.432-30.72-28.672-47.104-8.192-10.24-20.48-12.288-32.768-6.144-12.288 8.192-16.384 20.48-8.192 32.768 4.096 4.096 8.192 12.288 14.336 22.528h-8.192c-12.288-2.048-20.48 2.048-26.624 6.144-6.144 6.144-8.192 16.384-8.192 28.672V491.52c0 12.288 2.048 22.528 8.192 28.672 6.144 6.144 16.384 8.192 26.624 8.192H552.96v28.672h-102.4c-4.096 0-8.192 0-12.288 6.144v-43.008c0-28.672-16.384-36.864-28.672-36.864h-51.2s-2.048-2.048 0-10.24l2.048-45.056c0-4.096 0-8.192 2.048-8.192H395.264c8.192 0 16.384-2.048 20.48-6.144 6.144-6.144 10.24-16.384 10.24-32.768V307.2c0-14.336-2.048-24.576-10.24-30.72-6.144-6.144-16.384-10.24-30.72-10.24h-65.536c-8.192 0-20.48 2.048-22.528 22.528 0 14.336 6.144 22.528 20.48 24.576h53.248c6.144 0 10.24 2.048 10.24 12.288v30.72c0 14.336-6.144 16.384-12.288 16.384h-22.528c-12.288 0-20.48 2.048-26.624 8.192-6.144 6.144-8.192 16.384-8.192 28.672l-2.048 86.016c0 10.24 2.048 20.48 8.192 24.576 6.144 6.144 14.336 8.192 24.576 8.192h40.96c4.096 0 6.144 0 6.144 2.048 2.048 2.048 4.096 4.096 2.048 14.336 0 2.048 0 8.192-2.048 16.384-2.048 43.008-6.144 59.392-8.192 65.536-6.144 12.288-26.624 6.144-43.008 0-18.432-6.144-26.624 2.048-32.768 10.24-6.144 14.336-2.048 26.624 12.288 32.768 47.104 16.384 79.872 14.336 100.352-8.192 6.144-6.144 14.336-20.48 18.432-67.584 4.096 6.144 10.24 8.192 14.336 8.192h102.4v69.632c0 6.144 2.048 20.48 24.576 20.48 14.336 0 22.528-8.192 22.528-20.48v-69.632h110.592c6.144 0 18.432-2.048 20.48-22.528 2.048-20.48-8.192-24.576-16.384-24.576z m-151.552-65.536h-53.248c-10.24 2.048-14.336-6.144-12.288-18.432v-34.816h65.536v53.248z m0-90.112h-65.536v-43.008c-2.048-10.24 2.048-14.336 12.288-12.288h53.248v55.296z m32.768-53.248h51.2c10.24-2.048 14.336 2.048 14.336 12.288v43.008h-65.536v-55.296z m0 141.312v-53.248h65.536V471.04c0 10.24-6.144 16.384-16.384 16.384h-49.152z"
                    fill="#333333"
                    p-id="1848"
                  ></path>
                  <path
                    d="M724.992 145.408H299.008C200.704 145.408 122.88 223.232 122.88 321.536v288.768c0 96.256 77.824 176.128 176.128 176.128h106.496l83.968 83.968c6.144 6.144 14.336 8.192 22.528 8.192s16.384-2.048 22.528-8.192l83.968-83.968h106.496c96.256 0 176.128-77.824 176.128-176.128V321.536c0-98.304-77.824-176.128-176.128-176.128zM839.68 610.304c0 63.488-51.2 114.688-114.688 114.688h-118.784c-4.096 0-8.192 0-10.24 2.048-4.096 2.048-8.192 4.096-10.24 6.144L512 804.864l-71.68-71.68c-2.048-2.048-6.144-6.144-10.24-6.144-4.096-2.048-8.192-2.048-10.24-2.048h-118.784c-63.488 0-114.688-51.2-114.688-114.688V321.536c0-63.488 51.2-114.688 114.688-114.688h428.032c63.488 0 114.688 51.2 114.688 114.688v288.768z"
                    fill="#333333"
                    p-id="1849"
                  ></path>
                </svg>
              </span>
              <Button
                type="danger"
                onClick={() => {
                  addBarrage();
                }}
              >
                点击发送
              </Button>
            </div>
          )}

          {/* <Button
            type="danger"
            onClick={() => {
              addBarrage();
            }}
          >
            点击发送
          </Button> */}
        </div>
      </div>
    </div>
  );
}
